<template>
	<view class="content">
		<view class="map">
		    <!-- 地图组件 -->
		    <map id="map" 
				:longitude="lng"
				:latitude="lat"
				scale="20"
             :markers="covers"
				style="width:100%; height:100%;"
			>
		    </map>
			<!-- 返回原点 -->
			<view class="dw">
				<view class="dw2" @tap="clickcontrol()">
					<image src="/static/index/dw.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="area1">
				<view class="left">
					<view class="addr1">
						<text>{{addrname}}</text>
					</view>
					<view class="addr2">
						<text>{{addr}}</text>
					</view>
				</view>
				<view class="right">
					<text class="edit" @tap="getMapLocation()">更改地址</text>
				</view>
			</view>
			<view class="mph">
				<view class="left">
					<text>门牌号</text>
				</view>
				<view class="right">
					<input v-model="houseNo" placeholder="如:8栋801" />
				</view>
			</view>
			<view class="lxr">
				<view class="left">
					<text>联系人</text>
				</view>
				<view class="right">
					<input class="name" v-model="contacts" placeholder="姓名" />
					<input class="mobile" maxlength="11" v-model="mobile" placeholder="手机/座机" />
<!--					<text class="txl" @tap="getContacts()">通讯录</text>-->
				</view>
			</view>
			<view class="cz">
				<view class="left">
<!--					<text class="text1" @tap="addAddr()">存入地址簿</text>-->
				</view>
				<view class="right">
					<view class="btn" @tap="qrAddr()">
						<text>确认装货地址</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { checkMobile } from '@/common/utils.js'
	export default {
		data() {
			return {
				addrname: '',
				addr: '',//地址
				lat: '',
				lng: '',
				//标点
				covers: [{
					id: 1,
					latitude: '',
          iconPath:'/static/qs.png',
					longitude: '',
					width: 30,
					height: 30
				}],
				houseNo: '',//门牌号
				contacts: '',//联系人姓名
				mobile: '',//联系人手机/座机
        location:uni.getStorageSync('location')
			}
		},
		onLoad(option) {
      let location = uni.getStorageSync('location');
			this.lng = location.longitude
			this.lat = location.latitude
      this.covers[0].latitude = location.latitude;
      this.covers[0].longitude = location.longitude;
			this.addr = location.address
			this.addrname = location.street
		},
		methods: {
			//右下角定位按钮的点击事件
			clickcontrol(){
        console.log(11)
			  this.location = {
          ...uni.getStorageSync('location')
        }
			},
			//定位选择详细地址
			getMapLocation() {
				uni.chooseLocation({
					success: res => {
						if(res.address){
              console.log(res)
							this.addrname = res.name
							this.addr = res.address
							this.lng = res.longitude
							this.lat = res.latitude	
							this.covers[0].latitude = res.latitude
							this.covers[0].longitude = res.longitude
						}
					},
					fail: () => {
						// 如果用uni.chooseLocation没有获取到地理位置，则需要获取当前的授权信息，判断是否有地理授权信息
						uni.getSetting({
							success: res => {
								var status = res.authSetting;
								if (!status['scope.userLocation']) {
									// 如果授权信息中没有地理位置的授权，则需要弹窗提示用户需要授权地理信息
									uni.showModal({
										title: '是否授权当前位置',
										content: '需要获取您的地理位置，请确认授权，否则地图功能将无法使用',
										success: tip => {
											if (tip.confirm) {
												// 如果用户同意授权地理信息，则打开授权设置页面，判断用户的操作
												uni.openSetting({
													success: data => {
														// 如果用户授权了地理信息在，则提示授权成功
														if (data.authSetting['scope.userLocation'] === true) {
															uni.showToast({
																title: '授权成功',
																icon: 'success',
																duration: 1000
															});
															// 授权成功后，然后再次chooseLocation获取信息
															uni.chooseLocation({
																success: res => {
																	if(res.address){
																		this.addrname = res.name
																		this.addr = res.address
																		this.lng = res.longitude
																		this.lat = res.latitude	
																		this.covers[0].latitude = res.latitude	
																		this.covers[0].longitude = res.longitude
																	}
																}
															});
														} else {
															uni.showToast({
																title: '授权失败',
																icon: 'none',
																duration: 1000
															});
														}
													}
												});
											}
										}
									});
								}
							},
							fail: res => {
								uni.showToast({
									title: '调用授权窗口失败',
									icon: 'none',
									duration: 1000
								});
							}
						});
					}
				});
			},	
			//获取通讯录
			getContacts() {
			    uni.chooseContact({
			      success: (res) => {
			         console.log('获取联系人成功', res.userInfo)
			      },
			      fail: (err) => {
			         console.log('获取联系人失败', err);
			      }
			    });
			},
			//存入地址簿
			async addAddr(){
				//验参
				if(!this.contacts){
					uni.showToast({
						icon:"none",
						title:"请输入联系姓名"
					})
					return
				}
				if(!checkMobile(this.mobile)){
					uni.showToast({
						icon:"none",
						title:"请输入正确的手机号"
					})
					return
				}
				if(!this.addr){
					uni.showToast({
						icon:"none",
						title:"请选择地址"
					})
					return
				}
				
				let data = await this.$request({
						url: '/d/address/add',
						method: 'POST',
						data: {
							contacts: this.contacts,
							mobile: this.mobile,
							addr: this.addr,
							lat: this.lat,
							lng: this.lng,
							houseNo: this.houseNo,
						},
				});
				//提示
				uni.showToast({
					icon:"success",
					title:"添加成功"
				})
			},
			//确认装货地址
			qrAddr(){
				//验参
				if(!this.addr){
					uni.showToast({
						icon:"none",
						title:"请选择地址"
					})
					return
				}
				if(!this.contacts){
					uni.showToast({
						icon:"none",
						title:"请填写联系人"
					})
					return
				}
				if(!checkMobile(this.mobile)){
					uni.showToast({
						icon:"none",
						title:"请填写正确的手机号"
					})
					return
				}
				
        this.$store.commit('setAddress1',{
          startaddr:this.addr,
          contacts1:this.contacts,
          mobile1:this.mobile,
          houseNo1:this.houseNo,
          lat1:this.lat,
          lng1:this.lng,
        })
				uni.navigateBack({
				    delta:1  //返回上一页
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		padding-bottom: 100rpx;
		/* 地图容器样式 */
		.map{
		    height: 100%;
			height: 750rpx;
			.dw{
				position: relative;
				margin-top: -150rpx;
				padding-right: 20rpx;
				display: flex;
				justify-content: flex-end;
				.dw2{
					background-color: #fff;
					width: 80rpx;
					height: 80rpx;
					border-radius: 20rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					image{
						width: 50rpx;
					}
				}
			}
		}
		.main{
			position: relative;
			margin-top: -50rpx;
			background-color: #fff;
			padding: 40rpx 20rpx;
			border-radius: 40rpx 40rpx 0 0;
			.area1{
				background-color: #F6F6F6;
				padding: 30rpx 20rpx;
				border-radius: 20rpx;
				display: flex;
				.left{
					.addr1{
						font-size: $uni-font-size-lg;
						font-weight: bold;
						line-height: 50rpx;
					}
					.addr2{
						margin-top: 20rpx;
						line-height: 30rpx;
						font-size: $uni-font-size-sm;
						color: #ADADAD;
					}
				}
				.right{
					margin-left: auto;
					.edit{
						display: inline-block;
						width: 140rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						font-weight: bold;
						color: #747474;
						font-size: $uni-font-size-sm;
						border: 1rpx solid #D1D1D1;
						border-radius: 10rpx;
					}
				}
			}
			.mph{
				margin-top: 30rpx;
				padding: 30rpx 20rpx;
				border-radius: 20rpx;
				display: flex;
				line-height: 40rpx;
				background-color: #F6F6F6;
				.left{
					width: 120rpx;
					font-size: $uni-font-size-lg;
					font-weight: bold;
				}
				.right{
					margin-left: 20rpx;
					input{
						width: 500rpx;
					}
				}
			}
			.lxr{
				margin-top: 30rpx;
				padding: 30rpx 20rpx;
				border-radius: 20rpx;
				display: flex;
				line-height: 45rpx;
				background-color: #F6F6F6;
				.left{
					width: 120rpx;
					font-size: $uni-font-size-lg;
					font-weight: bold;
				}
				.right{
					margin-left: 20rpx;
					display: flex;
					.name{
						width: 150rpx;
					}
					.mobile{
						width: 230rpx;
						padding-left: 20rpx;
						border-left: 1rpx solid #E1E1E1;
					}
					.txl{
						display: inline-block;
						width: 140rpx;
						height: 50rpx;
						line-height: 50rpx;
						text-align: center;
						font-size: $uni-font-size-sm;
						font-weight: bold;
						background-color: #fff;
						border-radius: 10rpx;
						color: #747474;
						border: 1rpx solid #D1D1D1;
					}
				}
			}
			.cz{
				margin-top: 50rpx;
				display: flex;
				line-height: 100rpx;
				.left{
					color: #6B6B6B;
					font-size: $uni-font-size-lg;
					font-weight: 500;
				}
				.right{
					margin-left: auto;
					.btn{
						width: 400rpx;
						height: 100rpx;
						line-height: 100rpx;
						text-align: center;
						font-size: $uni-font-size-lg;
						font-weight: bold;
						color: #fff;
						background-color: #895FFF;
						border-radius: 20rpx;
						letter-spacing: 1rpx;
					}
				}
			}
		}
	}
</style>
